<template>
    <lightning-card
        title="ApexImperativeMethodWithParams"
        icon-name="custom:custom63"
    >
        <div class="slds-var-m-around_medium">
            <lightning-layout
                vertical-align="end"
                class="slds-var-m-bottom_small"
            >
                <lightning-layout-item flexibility="grow">
                    <lightning-input
                        type="search"
                        onchange={handleKeyChange}
                        label="Search"
                        value={searchKey}
                    ></lightning-input>
                </lightning-layout-item>
                <lightning-layout-item class="slds-var-p-left_xx-small">
                    <lightning-button
                        label="Search"
                        onclick={handleSearch}
                    ></lightning-button>
                </lightning-layout-item>
            </lightning-layout>
            <template lwc:if={contacts}>
                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template lwc:elseif={error}>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
        <c-view-source
            source="lwc/apexImperativeMethodWithParams"
            slot="footer"
        >
            Call an Apex method with parameters imperatively.
        </c-view-source>
    </lightning-card>
</template>
